<template>
  <base-breadcrumb :title="$route.meta.title" :key="programmeType">
    <!-- 实测实量方案、样板引路实施方案、编制品质工程六项专项治理方案的列表管理 -->
    <div id="base-breadcrumb" style="position: relative; overflow: hidden">
      <!-- 搜索 -->
      <searchData :searchData="searchArr" @search="search"></searchData>
      <!-- 表格 -->
      <a-card :bordered="false">
        <!-- <title-name :title="$route.meta.title"></title-name> -->
        <a-button
          v-btnPermission="`qm_02${programmeType + 4}_add_01`"
          class="mb12"
          icon="plus"
          type="primary"
          @click="handleManage(2)"
          >新增</a-button
        >
        <!-- 统计汇总 -->
        <AuditSummary :form="{ planType: programmeType, ...queryParam }" :loadCount="loadCount" :api="api" />
        <!-- 表格 -->
        <list-table
          ref="table"
          tableLayout="fixed"
          size="default"
          rowKey="id"
          :columns="columns"
          :request="loadData"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <span slot="action" slot-scope="text, record">
            <MoreButton>
              <!-- 查看 -->
              <a v-btnPermission="`qm_02${programmeType + 4}_loo_04`" @click="handleManage(0, record)">查看</a>
              <!-- 编辑 -->
              <template v-if="record.status === 'DRAFT' || record.status === 'REJECTED'">
                <a-divider v-btnPermission="`qm_02${programmeType + 4}_edi_02`" type="vertical"></a-divider>
                <a v-btnPermission="`qm_02${programmeType + 4}_edi_02`" @click="handleManage(1, record)">编辑</a>
              </template>
              <!-- 删除 -->
              <template v-if="record.status === 'DRAFT' && !record.changeVersion">
                <a-divider v-btnPermission="`qm_02${programmeType + 4}_del_03`" type="vertical"></a-divider>
                <a v-btnPermission="`qm_02${programmeType + 4}_del_03`" @click="handleRemove(record)">删除</a>
              </template>
              <!-- 调整 -->
              <template v-if="record.status === 'PAST'">
                <a-divider v-btnPermission="`qm_02${programmeType + 4}_rej_06`" type="vertical"></a-divider>
                <a v-btnPermission="`qm_02${programmeType + 4}_rej_06`" @click="handleManage(3, record)">{{
                  programmeType == 3 ? '变更' : '调整'
                }}</a>
              </template>
              <!-- 当状态为审批中 -->
              <template v-if="record.status != 'DRAFT'">
                <a-divider v-btnPermission="`qm_02${programmeType + 4}_exa_05`" type="vertical"></a-divider>
                <a
                  v-btnPermission="`qm_02${programmeType + 4}_exa_05`"
                  @click="$bus.$emit('showApprovalDetailsDialog', record.id)"
                  >审批详情</a
                >
              </template>
            </MoreButton>
          </span>
          <!-- 版本 -->
          <template slot="changeVersion" slot-scope="text, record">
            <a v-if="text" @click="handleOpen(record)">{{ 'V' + text }}</a>
          </template>
          <!-- 状态 -->
          <template slot="status" slot-scope="text, record">
            <status-display :statusCode="record.status" :statusMap="statusMap"></status-display>
          </template>
        </list-table>
      </a-card>
      <dialog-edit
        :visible.sync="visible"
        :api="api"
        :args="form"
        :query="query"
        :columns="dialogColumns"
        :pathName="`/quality/${['measuredAmount', 'modelProject', 'sixMeasures'][programmeType - 1]}/programmeEdit`"
      ></dialog-edit>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { planBusinessBase } from '@/api/quality/quality' // api
import dialogEdit from '@/views/quality/components/VisionHistory' // 版本详情
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目名称
import OrgTreeSelect from '@/components/OrgTreeSelect'
// import Selector from '@/components/Select/Selector' // 状态
import StatusDisplay from '@/components/StatusDisplay'
import AuditSummary from '@/views/quality/components/AuditSummary' // 统计汇总
import SelectProjectStatus from '@/views/quality/components/SelectProjectStatus' // 项目状态

const searchArr = [
  // 搜索框
  {
    name: '所属单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  // {
  //   name: '所属分公司',
  //   type: SelectSubCompany,
  //   valueKey: 'branchComId'
  // },
  // {
  //   name: '所属项目',
  //   type: SelectProject,
  //   keyValue: 'branchComId',
  //   valueKey: 'projectId'
  // },
  {
    name: '项目状态',
    type: SelectProjectStatus,
    valueKey: 'projectStatus',
  },
  {
    name: '编制人',
    type: 'input',
    value: 'editName'
  },
  {
    name: '编制时间',
    type: 'dateRange',
    value: 'planningDate',
    attr: {
      rangeFormat: ['startDate', 'endDate']
    }
  },
  {
    name: '状态',
    value: 'status',
    // type: Selector,
    type: 'select',
    data: [
      {
        label: '待提交审批',
        value: 'DRAFT'
      },
      {
        label: '审批中',
        value: 'SUBMITTED'
      },
      {
        label: '审批通过',
        value: 'PAST'
      },
      {
        label: '审批不通过',
        value: 'REJECTED'
      }
    ]
  }
]
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    width: 80,
    customRender() {
      return arguments[2] + 1
    }
  },
  {
    title: '分公司',
    ellipsis: true,
    dataIndex: 'branchComName',
     width: 200,
  },
  {
    title: '项目',
    ellipsis: true,
    dataIndex: 'projectName',
    width: 200,
  },
  {
    title: '编制时间',
    ellipsis: true,
    dataIndex: 'editDate',
    width: 200,
  },
  {
    title: '编制人',
    ellipsis: true,
    dataIndex: 'editName',
    width: 200,
  },
  {
    title: '版本信息',
    dataIndex: 'changeVersion',
    scopedSlots: { customRender: 'changeVersion' },
    width: 80,
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
    width: 200,
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
const dialogColumns = [
  {
    title: '版本号',
    dataIndex: 'changeVersion',
    customRender(e) {
      return e ? 'V' + e : ''
    }
  },
  {
    title: '上传时间',
    dataIndex: 'fillerDate'
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '100px',
    scopedSlots: { customRender: 'actions' }
  }
]
export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    dialogEdit,
    StatusDisplay,
    // Selector,
    AuditSummary
  },
  watch: {
    '$route.meta.title': {
      immediate: true,
      handler() {
        this.$nextTick(this.search)
      }
    }
  },
  props: ['programmeType'], // 1：实测实量方案；2：样板引路实施方案；3：编制品质工程六项专项治理方案
  data() {
    this.columns = columns
    this.dialogColumns = dialogColumns
    this.searchArr = searchArr
    return {
      statusMap: {
        DRAFT: {
          label: '待提交审批',
          color: 'gray'
        },
        SUBMITTED: {
          label: '审批中',
          color: 'green'
        },
        PAST: {
          label: '审批通过',
          color: 'green'
        },
        REJECTED: {
          label: '审批不通过',
          color: 'red'
        }
      }, // 审批状态枚举
      queryParam: {}, // 查询参数
      visible: false, // 弹窗显隐控件
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({ planType: this.programmeType }, parameter, this.queryParam)
        return planBusinessBase.postList(requestParameters).then((res) => {
          return res
        })
      },
      loadCount: 0 // 汇总加载控件
    }
  },
  computed: {
    api: () => planBusinessBase,
    // 弹窗参数
    form() {
      return {
        planType: this.programmeType
      }
    },
    // 查看详情携带参数
    query() {
      return {
        programmeType: this.programmeType
      }
    }
  },
  methods: {
    /**
     * 搜索
     */
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table?.refresh(true)
      this.loadCount++
    },
    /**
     * 查看历史版本
     */
    handleOpen(e) {
      this.form.id = e.id
      this.visible = true
    },
    /**
     * 删除草稿
     */
    handleRemove(record) {
      this.$confirm({
        title: '温馨提示',
        content: '确定删除草稿？',
        onOk: () => {
          return planBusinessBase.remove({ id: record.id, planType: this.programmeType }).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('删除成功！')
              // 刷新
              this.search()
            }
          })
        }
      })
    },
    /**
     * 操作栏
     */
    handleManage(type, record) {
      this.editModel = type
      let query = {
        editModel: type,
        programmeType: this.programmeType
      }
      if (record?.id) {
        query.id = record.id
      }
      this.$router.push({
        name: `/quality/${['measuredAmount', 'modelProject', 'sixMeasures'][this.programmeType - 1]}/programmeEdit`,
        query
      })
    }
  }
}
</script>
